import React, { Component } from 'react'

// 引入路由 
import {
  BrowserRouter, //将指定区域设置为可配置路由区域。一般放在App.jsx结构部分的最外层，使整个页面可配置路由
  Switch, //拿浏览器路由和路由的path作比较，相同则展示，包在route的外层
  Route, //相当于vue的router-view，相当于指定切换区域，以一个路由页面有一个route组件
  NavLink, //相当于vue的router-link，切换标签，渲染到页面将会是a链接
} from "react-router-dom"


// 引入组件  
import Home from './views/Home';
import Classify from './views/Classify';
import Jingxi from "./views/Jingxi";
import ShopCar from "./views/ShopCar"
import My from "./views/My"


// 引入配置表，路由显示页面和路由按钮文件
import routeConfig from "./router/routerConfig" //路由配置表 
import RouterView from './router/RouterView';
import RouterLink from './router/RouterLink';

export class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <header></header>


        {/* ❤ 中间路由可切换区域  */}
        <main>
          <RouterView routeConfig={ routeConfig }></RouterView>
          {/* 包在route的最外层， 里面包上多个Route */}
          {/* <Switch> */}
            {/* 注：path: 路由路径;  component: 路由所对应的页面组件 */}
              {/* <Route path="/home" component={Home}></Route>
              <Route path="/classify" component={Classify}></Route>
              <Route path="/jingxi" component={Jingxi}></Route>
              <Route path="/shopcar" component={ShopCar}></Route>
              <Route path="/my" component={My}></Route> */}
          {/* </Switch> */}
        </main>


      {/* ❤ 底部路由切换按钮  */}
        <footer>
          <RouterLink routeConfig={routeConfig}></RouterLink>
          {/* to:指定要跳转的路径  */}
          {/* <NavLink to="/home">首页</NavLink>
          <NavLink to="/classify">分类</NavLink>
          <NavLink to="/jingxi">京喜</NavLink>
          <NavLink to="/shopcar">购物车</NavLink>
          <NavLink to="/my">我的</NavLink> */}
        </footer>
      </BrowserRouter>
    )
  }
}

export default App